<template>
  <div class="city-list-page">
    <van-swipe-cell
      v-for="(item, $index) in weartherList"
      :key="item.id"
      :disabled="$index == 0"
      class="van-swipe-cell"
    >
      <div class="city-list-item" @click="goTo(item.CityCode)">
        <div
          class="background-image"
          :style="{
            backgroundImage: getweartherBg(item.cond_code),
          }"
        ></div>
        <div
          class="flex container align-center justify-between"
          :style="{
            backgroundImage: getweartherIcon(item.cond_code_d),
          }"
        >
          <div>
            <p class="city">
              <span> {{ item.ReadmeName }}</span>
              <i v-if="$index == 0" class="iconfont icon-Frame1"></i>
            </p>
            <p class="pm">
              <span>空气{{ item.qlty }}</span
              ><span>{{ item.tmp_min }}°C/{{ item.tmp_max }}°C</span>
            </p>
          </div>
          <p class="tem">{{ item.tmp }}°C</p>
        </div>
      </div>
      <template #right>
        <van-button
          square
          text="删除"
          @click="deleteCity(item.id)"
          type="danger"
          class="delete-button"
        />
      </template>
    </van-swipe-cell>
    <div class="addBtn flex">
      <p>°C/°F</p>
      <i class="iconfont icon-add" @click="goToAddCity"></i>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed, onActivated, watch } from "vue";
import { useStore } from "vuex";
import { getWeatherList } from "../service/home";
import { useRouter } from "vue-router";
import _ from "lodash";
export default {
  name: "CityList",
  setup() {
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      weartherList: [],
    });

    const init = async () => {
      await store.dispatch("initCitys");
      updatewearther();
    };

    init();

    onActivated(async () => {
      updatewearther();
    });

    watch(
      () => store.state.cityList,
      () => {
        const cityList = _.concat([], store.state.cityList);
        _.each(cityList, (item) => {
          const res =
            _.filter(state.weartherList, (o) => {
              return item.id === o.id;
            })[0] || {};
          item = _.merge(item, res);
        });
        state.weartherList = cityList;
      }
    );

    const cityList = computed(() => {
      return store.state.cityList;
    });

    const updatewearther = () => {
      _.each(cityList.value, async (item, index) => {
        const wearther = await getWeatherList(item.CityCode);
        const now_weather = wearther.now;
        const air_now_city = wearther.air_now_city;
        const daily_forecast = wearther.daily_forecast[0];
        const weartherInfo = _.merge(
          {},
          item,
          now_weather,
          air_now_city,
          daily_forecast
        );
        state.weartherList[index] = weartherInfo;
      });
    };

    const goTo = (cityCode) => {
      router.push("/home/" + cityCode);
    };

    const getweartherBg = (cond_code = null) => {
      if (cond_code) {
        return `url(https://apip.weatherdt.com/20200701/bg/view/${cond_code}d.png)`;
      }
      return "";
    };

    const getweartherIcon = (cond_code_d = null) => {
      if (cond_code_d) {
        return `url(https://apip.weatherdt.com/20200701/icon/c/${cond_code_d}d.png)`;
      }
      return "";
    };

    const deleteCity = (id) => {
      store.commit("deleteCity", { id });
    };

    const goToAddCity = () => {
      router.push("/add-city");
    };

    return {
      ...toRefs(state),
      cityList,
      goTo,
      getweartherBg,
      getweartherIcon,
      deleteCity,
      goToAddCity,
    };
  },
};
</script>
<style lang="scss" scoped>
.city-list-page {
  width: 100vw;
  max-width: 750px;
  height: 100vh;
  padding: 5px;
  box-sizing: border-box;
  background-image: url(../assets/images/bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  overflow: scroll;
  padding-bottom: 100px;
}
.city-list-item {
  width: 100%;
  color: #ffffff;
  height: 100px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;

  .background-image {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.7;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }
  .container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: left;
    background-repeat: no-repeat;
    background-position: 60% center;
    background-size: auto 60%;
    .city {
      font-size: 24px;
      > i {
        font-size: 22px;
        margin-left: 5px;
      }
    }
    .pm {
      font-size: 14px;
      margin-top: 10px;
      > span {
        margin-right: 5px;
      }
    }

    .tem {
      font-size: 30px;
    }
  }
}
.van-swipe-cell {
  margin-bottom: 5px;
}
.delete-button {
  height: 100%;
}
.addBtn {
  height: 60px;
  background-color: rgba($color: #000000, $alpha: 0.3);
  color: #ffffff;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-radius: 5px;

  > p {
    font-size: 16px;
  }

  i {
    font-size: 20px;
  }
}
</style>